<template>
    <el-drawer title="导入商品" :size="1000" :visible.sync="show" append-to-body direction="rtl" :before-close="close"
        :wrapperClosable="false">
        <el-alert title="操作说明：" type="warning" :closable="false">
            <p class="alert-style">1.<span class="copy" @click="uploadMode">下载样例模板;</span></p>
            <p class="alert-style">2.样例模板标题表头信息不能改动或删除或编辑，格式仅支持xlsx；</p>
            <p class="alert-style">3.严格按照样例数据必填或选填内容格式进行数据创建；</p>
        </el-alert>
        <el-upload class="upload-file" :action="uploadUrl" :headers="headers" name="file" :auto-upload="true"
            :show-file-list="false" :accept="accept" :on-success="handleSuccess" :on-progress="handleProgress">
            <el-button type="primary" :loading="loading" :disabled="loading">{{ loadingText }}</el-button>
        </el-upload>
    </el-drawer>
</template>


<script>
import hostUrl from "@/utils/baseUrl.js";
export default {
    name: 'importGoods',
    props: {
        show: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            headers: {
                Authorization: localStorage.getItem("Supply-Access-Token")
                    ? localStorage.getItem("Supply-Access-Token")
                    : "",
            },
            // 导入文件类型  
            accept: '.XLSX',
            uploadUrl: hostUrl + "/goodsImport",
            baseUrl: '',
            // 导入中
            loading: false,
            loadingText: '导入文件'
        }
    },
    created() {
        var origin = window.location.origin;
        if (origin.indexOf('localhost') > -1) { //本地调取测试环境
            this.baseUrl = 'https://cloud.supply.sxruanjian.cn';
        } else {
            this.baseUrl = origin
        }
    },
    methods: {
        handleProgress(event, file, fileList) {
            this.loading = true
            this.loadingText = '导入中'
        },
        close() {
            this.$emit('close')
        },
        // 下载样例模板 
        uploadMode() {
            window.location.href = this.baseUrl + `/uploads/import_plat/供应链商品导入模板样例_供应商端.xlsx`;
        },
        // 上传结果
        handleSuccess(res) {
            if (res.code == 0) {
                // 提示用户导入结果
                // this.$message({
                //     dangerouslyUseHTMLString: true,
                //     message: res.msg,
                //     type: "warning",
                //     duration: 0,
                //     showClose: true,
                // });

                this.$notify({
                    title: '提示',
                    message: res.msg,
                    dangerouslyUseHTMLString: true,
                    type: 'warning',
                    duration: 0,
                    showClose: true
                });
                this.loading = false
                this.loadingText = '导入文件'
                this.$emit('result')
            } else {
                this.loading = false
                this.loadingText = '导入文件'
                this.$message.error(res.msg);
            }
        },
    }
}
</script>

<style scoped>
/deep/ .el-drawer__header {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding: 12px;
    margin-bottom: 0;
}

.alert-style {
    font-size: 14px;
    margin: 10px 0;
}

.card-area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.copy {
    color: var(--main-color);
    font-style: normal;
    cursor: pointer;
    text-decoration: underline;
}

.upload-file {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/deep/ .el-upload--text {
    height: 0;
    width: 0;
}
</style>